import axios from "axios";
import React, { useEffect, useReducer } from "react";
import { useLocation, useParams } from "react-router-dom";
import { ListRawState } from "../home";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { ActionBar, Notify } from "react-vant";
import { useDispatch } from "react-redux";

const Index: React.FC = () => {
  // // 方式一：  获取详情数据
  // const { id } = useParams();
  // // 请求详情接口函数
  // const fetchDetail = async () => {
  //   const resp = await axios.post('/api/list', { id })
  //   console.log(resp.data)
  // }
  // // 副作用函数
  // useEffect(() => {
  //   fetchDetail()
  // }, [])

  // 2. 方式二： 路由传参
  const location = useLocation();
  const state = location.state as ListRawState;
  const dispatch = useDispatch();

  const handleBuy = () => {
    // 加入购物车--- dispatch action
    dispatch({ type: "addCart", payload: { ...state, count: 1, state: true } });
    Notify.show({ type: 'success', message: '加入购物车成功' })
  };
  return (
    <div>
      <div className="info">
      <img src={state.image} alt="" width={"100%"} />
      <div className="title">{state.title}</div>
      <div className="desc">{state.desc}</div>
      <div className="price">{state.price}</div>
      </div>

      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log("chat click")}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text="购物车"
          onClick={() => console.log("cart click")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log("shop click")}
        />
        <ActionBar.Button
          type="danger"
          text="加入购物车"
          onClick={() => handleBuy()}
        />
      </ActionBar>
    </div>
  );
};

export default Index;
